<script setup>
import { ref } from 'vue'
import { jx } from '@/api/user'
import { showToast, showLoadingToast } from 'vant'

const videoUrl = ref('')
const parsedUrl = ref('')
const loading = ref(false)
const showResult = ref(false)

const handleParse = async () => {
  if (!videoUrl.value) {
    showToast({
      message: '请输入视频链接',
      icon: 'warning-o',
      position: 'top'
    })
    return
  }

  if (!videoUrl.value.includes('douyin.com') && !videoUrl.value.includes('kuaishou.com')) {
    showToast({
      message: '目前仅支持抖音和快手链接',
      icon: 'warning-o',
      position: 'top'
    })
    return
  }

  try {
    loading.value = true
    showLoadingToast({
      message: '正在解析中...',
      forbidClick: true,
      duration: 0
    })
    
    const res = await jx(videoUrl.value)
    parsedUrl.value = res.data
    showResult.value = true
    showToast({
      message: '解析成功',
      icon: 'success',
      position: 'top'
    })
  } catch (error) {
    showToast({
      message: '解析失败，请检查链接是否正确',
      icon: 'cross',
      position: 'top'
    })
  } finally {
    loading.value = false
  }
}

const copyUrl = async () => {
  try {
    await navigator.clipboard.writeText(parsedUrl.value)
    showToast({
      message: '复制成功',
      icon: 'success',
      position: 'top'
    })
  } catch (error) {
    showToast({
      message: '复制失败，请手动复制',
      icon: 'cross',
      position: 'top'
    })
  }
}

const clearInput = () => {
  videoUrl.value = ''
  parsedUrl.value = ''
  showResult.value = false
  showToast({
    message: '已清空输入',
    position: 'top'
  })
}

// 添加示例链接
const addExample = () => {
  videoUrl.value = '8.28 复制打开抖音，看看【可爱豌豆的作品】https://v.douyin.com/iUqY6w1K/'
  showToast({
    message: '已添加示例链接',
    position: 'top'
  })
}
</script>

<template>
  <div class="parse-page">
    <div class="header">
      <van-nav-bar title="视频解析" left-arrow @click-left="$router.back()" />
    </div>

    <div class="content">
      <div class="title-animation">
        <h2>视频链接解析</h2>
        <p>支持抖音、快手等平台视频解析</p>
      </div>

      <div class="input-section">
        <van-field
          v-model="videoUrl"
          type="textarea"
          placeholder="请粘贴视频分享链接"
          rows="3"
          autosize
          class="custom-input"
        >
          <template #button>
            <van-icon name="clear" @click="clearInput" v-if="videoUrl" />
          </template>
        </van-field>

        <div class="button-group">
          <van-button 
            type="primary" 
            block 
            :loading="loading"
            @click="handleParse"
            class="parse-button"
          >
            开始解析
          </van-button>
          <van-button 
            type="default" 
            block 
            @click="addExample"
            class="example-button"
          >
            添加示例链接
          </van-button>
        </div>
      </div>

      <transition name="fade">
        <div class="result-section" v-if="showResult">
          <div class="result-card">
            <h3>解析结果</h3>
            <div class="url-box">
              {{ parsedUrl }}
            </div>
            <van-button 
              type="primary" 
              size="small" 
              @click="copyUrl"
              class="copy-button"
            >
              复制链接
            </van-button>
          </div>
        </div>
      </transition>

      <div class="instructions">
        <h3>使用说明</h3>
        <ol>
          <li>打开视频平台APP，点击分享按钮</li>
          <li>复制视频链接</li>
          <li>粘贴到上方输入框</li>
          <li>点击解析按钮获取视频地址</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.parse-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f7ff 0%, #e9ebff 100%);

  .content {
    padding: 20px;

    .title-animation {
      text-align: center;
      margin-bottom: 30px;
      animation: slideDown 0.8s ease-out;

      h2 {
        color: #333;
        margin-bottom: 10px;
        font-size: 24px;
      }

      p {
        color: #666;
        font-size: 14px;
      }
    }

    .input-section {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      animation: fadeIn 0.8s ease-out;

      .custom-input {
        margin-bottom: 20px;
      }

      .parse-button {
        height: 44px;
        border-radius: 22px;
        font-size: 16px;
        background: linear-gradient(45deg, #4481eb, #04befe);
        border: none;
        transition: transform 0.3s ease;

        &:active {
          transform: scale(0.98);
        }
      }
    }

    .result-section {
      margin-top: 20px;

      .result-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

        h3 {
          color: #333;
          margin-bottom: 15px;
        }

        .url-box {
          background: #f5f7fa;
          padding: 12px;
          border-radius: 6px;
          word-break: break-all;
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
        }

        .copy-button {
          width: 100%;
          border-radius: 20px;
        }
      }
    }

    .instructions {
      margin-top: 30px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
      animation: slideUp 0.8s ease-out;

      h3 {
        color: #333;
        margin-bottom: 15px;
      }

      ol {
        padding-left: 20px;
        color: #666;

        li {
          margin-bottom: 10px;
          line-height: 1.5;
        }
      }
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;

  .example-button {
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }
  }
}
</style> 